<template>
  <!--  -->
  <div class="page-container">
    <SelectTrigger label="折线的类型" :options="options" width="400px" />
    <div id="cesiumContainer"></div>
  </div>
</template>
<script setup>
import * as Cesium from "cesium";
import TOKEN from "@/utils/cesium/token.js";
const options = ref([]); // 选项

onMounted(async () => {
  Cesium.Ion.defaultAccessToken = TOKEN;
  // 实例化
  const viewer = new Cesium.Viewer("cesiumContainer", {
    // 界面控件 全部关闭
    timeline: false, // 时间轴控件
    animation: false, // 动画控件
    geocoder: false, // 搜索按钮
    homeButton: false, // 主页按钮
    sceneModePicker: false, // 投影方式按钮
    baseLayerPicker: false, // 图层选择按钮
    navigationHelpButton: false, // 帮助手势按钮
    fullscreenButton: false, // 全屏按钮
  });

  // 实例化一个 primitive集合   这样的好处是在增删的时候 能不影响其他的区域
  const primitives = new Cesium.PrimitiveCollection();
  viewer.scene.primitives.add(primitives);

  options.value = [
    {
      text: "创建一个",
      onselect: async () => {
        primitives.removeAll();
        const rectangle = Cesium.Rectangle.fromDegrees(-92, 20, 86, 27);
        // 几何体实例
        const geometryInstances = new Cesium.GeometryInstance({
          // 几何体
          geometry: new Cesium.RectangleGeometry({
            rectangle: rectangle,
            // 定点的   EllipsoidSurfaceAppearance 椭圆表面外貌
            vertexFormat: Cesium.EllipsoidSurfaceAppearance.VERTEX_FORMAT,
            stRotation: Cesium.Math.toRadians(45),
          }),
        });
        // 核心语法
        const primitive = new Cesium.Primitive({
          // 几何体实例
          geometryInstances: geometryInstances,
          // 外貌
          appearance: new Cesium.EllipsoidSurfaceAppearance({
            material: Cesium.Material.fromType("Color"),
          }),
        });
        primitives.add(primitive);
      },
    },
    {
      text: "2",
      onselect: async () => {},
    },
  ];
});
</script>

<style scoped>
.page-container {
  width: 100%;
  height: 100%;
  position: relative;
}
#cesiumContainer {
  width: 100%;
  height: 100%;
}
</style>
